<template>
  <div class="detail">
    <div>
      <h4 style="color: #333333; text-align: center">
        {{ detail.tourTitle }}
      </h4>
      <div class="heder">
        <div class="userAvatar">
          <img
            style="width: 100%; height: 100%"
            :src="detail.tourTitleImgUrl"
            alt=""
          />
        </div>
        <div class="name">{{ detail.publisherName }}</div>
        <div>发表于{{ detail.createTimeStr }}</div>
      </div>
      <el-divider></el-divider>
    </div>
    <div>
      <div class="text">
        <div class="t_content">
          {{ detail.tourInfoContent }}
        </div>
        <el-image :src="detail.tourInfoImgUrl"></el-image>
      </div>
      <div class="favoriteCollection">
        <div class="flexBox">
          <div
            class="boxItem"
            :class="[isCollect ? 'el-icon-star-on' : 'el-icon-star-off']"
            @click="collectTour"
          >
            {{ isCollect ? "已收藏" : "收藏" }}
          </div>
        </div>
      </div>
      <div class="comment">
        <Comment
          :content="detail.travelsReviewsList"
          type="3"
          :productId="tourId"
        />
      </div>
    </div>
  </div>
</template>

<script>
import Comment from "../../../../../components/comment/index";
import { get_data } from "../../../../../utils/utils";
export default {
  data() {
    return {
      tourId: this.$route.query.tourId,
      detail: {},
      userInfo: {},
      isCollect: false,
    };
  },
  components: {
    Comment,
  },
  mounted() {
    this.getDetail();
    if (get_data("token")) {
      this.userInfo = JSON.parse(get_data("userInfo"));
    }
  },
  methods: {
    getDetail() {
      this.$http
        .fetch(this.$apiPath.getTravelsInfo, {
          params: {
            tourId: this.tourId,
          },
        })
        .then((res) => {
          if (res.code === 200) {
            console.log(res);
            this.detail = res.data;
          }
        });
    },
    collectTour() {
      if (get_data("token")) {
        this.$http
          .fetch(this.$apiPath.collectTour, {
            method: "post",
            data: {
              customerId: this.userInfo.id,
              tourId: this.tourId,
            },
          })
          .then((res) => {
            if (res.code === 200) {
              this.isCollect = true;
              this.$message.success("恭喜你，收藏成功");
            } else if (res.code === 400) {
              this.$message.info(res.msg);
              this.isCollect = true;
            }
          });
      } else {
        this.$router.push({
          path: "/login",
        });
      }
    },
  },
};
</script>

<style lang="less">
.detail {
  width: 1220px;
  margin: 0 auto;
  .heder {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    margin-top: 18px;
    .userAvatar {
      width: 36px;
      height: 36px;
      border-radius: 50%;
    }
    .name {
      margin: 0 33px 0 4px;
    }
  }
  .text {
    color: #666666;
    display: flex;
    flex-direction: column;
    align-items: center;
    .t_content {
      width: 1200px;
      margin: 69px 0 48px;
      text-indent: 2em;
    }
    /deep/ .el-image {
      max-width: 1200px;
    }
  }
  .titleText {
    font-size: 18px;
    font-weight: 400;
    color: #333333;
    line-height: 8px;
  }
  .favoriteCollection {
    margin-top: 54px;
    .flexBox {
      margin: 0 auto;
      width: 220px;

      .boxItem {
        cursor: pointer;
        font-size: 18px;
        color: #666666;
        &::first-letter {
          font-size: 22px;
          color: #cf975a;
        }
      }
    }
  }
}
</style>
